<template>
	<div style="height: 100%">
		<div class="lottery-notice" ref="targetRef">
			<div class="top-logo">
				<img src="/@/assets/lottery/cwlogo.png" alt="中国福利彩票" class="cw-logo" />
			</div>

			<!-- 中奖号码区域 -->
			<div class="winning-numbers-section">
				<!-- <h3>中奖号码</h3> -->
				<div class="numbers">
					<span v-for="(item, index) in infoData?.redNum?.split(',')" :key="index">{{ item }}</span>
					<span v-for="(item, index) in infoData?.buleNum?.split(',')" :key="index">{{ item }}</span>
				</div>
			</div>

			<!-- 中奖结果表格 -->
			<div class="winning-results-section">
				<!-- <h3>宁夏中奖结果</h3> -->
				<table class="results-table">
					<tbody>
						<tr :key="idx">
							<td style="width: 95px; padding-left: 10px">奖等</td>
							<td style="width: 100px">中奖注数</td>
							<td style="width: 115px">单注奖金额（元）</td>
							<td style="width: 100px">中奖金额（元）</td>
						</tr>

						<tr v-for="(item, idx) in infoData?.winNoticeDetailsVos" :key="idx">
							<td style="width: 95px; padding-left: 10px">{{ item.gradeName }}</td>
							<td style="width: 100px">{{ item.totalNumProvinces }}</td>
							<td style="width: 115px">{{ item.bonus }}</td>
							<td style="width: 100px">{{ item.bonus * item.totalNumProvinces }}</td>
						</tr>
					</tbody>
				</table>
			</div>

			<!-- 金额统计区域 -->
			<div class="amount-section">
				<div class="amount-item" style="margin-top: 45px">
					<!-- <h3>宁夏销售金额</h3> -->
					<p class="amount">{{ infoData.totalSalesProvince }}元</p>
				</div>
				<div class="amount-item" style="margin-top: 50px">
					<!-- <h3>中奖总金额</h3> -->
					<p class="amount">{{ Number(infoData.totalWinProvince).toFixed(2) }}元</p>
				</div>
				<div class="amount-item" style="margin-top: 55px">
					<!-- <h3>奖池金额</h3> -->
					<p class="amount">{{ Number(infoData.balanceMoney).toFixed(2) }}元</p>
				</div>
			</div>

			<!-- 兑奖期限区域 -->
			<div class="claim-deadline-section">
				<!-- <h3>兑奖期限</h3> -->
				<p>本期兑奖截止日为{{ infoData.endCashTime }}</p>
				<p>逾期未兑奖视为弃奖，弃奖奖金纳入彩票公益金。</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import html2canvas from 'html2canvas';

const props = defineProps({
	infoData: {
		type: Object,
		default: () => { },
	},
});
const targetRef = ref();
// 截图并下载
const captureAndDownload = async () => {
	if (!targetRef.value) return;

	try {
		// 配置项（重要！）
		const options = {
			scale: 2, // 提高分辨率（默认值为设备像素比）
			useCORS: true, // 允许跨域图片
			backgroundColor: null, // 背景透明（设为 '#fff' 则为白色背景）
			logging: false, // 关闭日志
		};

		// 生成 Canvas
		const canvas = await html2canvas(targetRef.value, options);

		// Canvas 转图片
		const imageUrl = canvas.toDataURL('image/png');

		// 触发下载
		const link = document.createElement('a');
		link.href = imageUrl;
		link.download = `screenshot-${new Date().getTime()}.png`;
		link.click();
	} catch (error) {
		console.error('截图失败:', error);
	}
};

// 页面加载时
onMounted(() => {
	NextLoading.done();
});

defineExpose({
	captureAndDownload,
});
</script>

<style scoped lang="scss">
@import url('../css.scss');

.dialogZ {
	:deep(.el-overlay) {
		background-color: rgba(141, 141, 141, 0.7);
		backdrop-filter: saturate(180%) blur(3px);
	}
}

.lottery-notice {
	width: 567.65px;
	height: 1091.8px;
	font-family: 'Microsoft Yahei', sans-serif;
	background-color: #fdf5e6;
	/* 模拟浅黄色背景 */
	padding: 20px;
	border-radius: 8px;
	max-width: 600px;
	margin: 20px auto;
	background: url('/@/assets/lottery/3d_logo.png') no-repeat center top;
	background-size: 100% 100%;

	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	position: relative;
}

.title {
	text-align: center;
	margin-bottom: 20px;
}

.title h1,
.title h2 {
	color: #00008b;
	/* 深蓝色标题 */
	margin: 10px 0;
}

.title h1 {
	font-size: 24px;
}

.title h2 {
	font-size: 20px;
}

.issue,
.draw-date {
	font-size: 16px;
	color: #333;
	margin: 5px 0;
}

.winning-numbers-section {
	text-align: center;
	margin-bottom: 20px;
	margin-top: 315px;

	color: #405e89;
}

.winning-numbers-section h3 {
	font-size: 18px;
	color: #fff;
	background-color: #4169e1;
	/* 皇家蓝标题栏 */
	padding: 8px 0;
	margin-bottom: 15px;
	border-radius: 4px;
}

.numbers {
	display: flex;
	justify-content: center;
	gap: 63px;
	text-align: center;
	width: 100%;
	margin-left: 7px;

	font-size: 36px;
	font-weight: bold;
}

.number-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 1px solid #ccc;
	font-size: 28px;
	font-weight: bold;
	background-color: #fff;
	border-radius: 4px;
}

.winning-results-section h3 {
	font-size: 18px;
	color: #fff;
	background-color: #4169e1;
	padding: 8px 0;
	text-align: center;
	margin-bottom: 10px;
	border-radius: 4px;
	width: 100%;
}

.results-table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	margin-top: 35px;
	margin-left: 5px;
}

.results-table td {
	// border: 1px solid #ccc;
	// padding: 8px;

	color: #405e89;
	font-size: 12.5px;
	font-weight: bold;
	height: 46px;
}

.amount-section .amount-item {
	margin-bottom: 15px;
}

.amount-section h3 {
	font-size: 18px;
	color: #fff;
	background-color: #4169e1;
	padding: 8px 0;
	text-align: center;
	margin-bottom: 10px;
	border-radius: 4px;
}

.amount {
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	color: #405e89;
}

.claim-deadline-section h3 {
	font-size: 18px;
	color: #fff;
	background-color: #4169e1;
	padding: 8px 0;
	text-align: center;
	margin-bottom: 10px;
	border-radius: 4px;
}

.claim-deadline-section {
	margin-top: 50px;
	color: #405e89;
	font-weight: bold;
}

.claim-deadline-section p {
	text-align: center;
	margin: 5px 0;
	line-height: 1.5;
}
</style>
